<template>
	<view class="">
		<u-navbar :is-back="true" :custom-back="goBack" title="设置计费方式" back-text="">
		</u-navbar>
		<u-form :model="form" ref="uForm">
			<view class="">
				计费方式
			</view>
			<u-form-item v-for="item in 6" :key="item" style="height: 2.4rem;">
				<view @click="selectClickM(item,index)" class="Icon-bottom" style="display: flex;align-items: center;">
					<image v-if="item.select == false" style="width: 1em; height: 1em;" src="../../style/image/cargo/kuang.png" alt="" />
					<image v-else style="width: 1em; height: 1em;margin: 3px;" src="../../style/image/cargo/gou.png" alt="" />
				</view>
				<u-input v-model="form.price" type="number" placeholder="输入金额" style="margin-left: 5px;" />
				<text>
					<text>1</text> 元/半小时
				</text>
			</u-form-item>
			<u-form-item label="标签:" style="position: relative;">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input" style="margin-left: 1rem;">{{array[index]}}</view>
					<u-icon name="arrow-down" style="position: absolute;top: 1.1rem;left: 5.2rem;"></u-icon>
				</picker>
			</u-form-item>
			<u-form-item style="height: 2.4rem;">
				<view class="">
					备注：
				</view>
				<u-input style="margin-left: 1rem;" v-model="form.price" type="number" placeholder="请输入备注信息" />
			</u-form-item>
			<u-form-item style="height: 2.4rem;">
				<view class="">
					设备SN:
				</view>
				<text style="margin-left: 0.5rem;">4se4f86d4sf8sf4sdfsd</text>
			</u-form-item>
		</u-form>
		<view class="button">
			<u-button type="success" style="border-radius: 0; position: fixed;bottom: 0;width: 100%;">确认</u-button>
		</view>
	</view>
</template>

<script lang="js">
	export default {
		data() {
			return {
				array: ['火爆', '美国', '巴西', '日本'],
				index: 0,
				form: {
					index: 0,
					name: '',
					intro: '',
					sex: '',

				},
				checkboxList: [{
					name: '标签',
					checked: false,
					disabled: false
				}],
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
			};
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e);
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f5f7;
	}

	.u-form {
		background-color: #fff;
		padding: 35rpx;
		margin: 25rpx;
		border-radius: 10rpx;
	}
</style>
